<template>
    <div>
        <headers />
        <div class="container">
            <div>
                <div class="userCenterWarp">
                    <div class="userCenterTitle">个人中心</div>
                    <el-row :gutter="30">
                        <el-col :span="4">
                            <sideNav />
                        </el-col>
                        <el-col :span="20" class="mt-30">
                            <el-breadcrumb separator-class="el-icon-arrow-right" class="user-breadcrumb">
                                <el-breadcrumb-item><strong>我的订单</strong></el-breadcrumb-item>
                            </el-breadcrumb>
                            <el-form ref="paramsRef" :model="params">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item prop="goods_name">
                                            <el-input v-model="params.goods_name" placeholder="请输入商品名称">
                                                <template #prefix>商品名称</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="order_sn">
                                            <el-input v-model="params.order_sn" placeholder="请输入订单编号">
                                                <template #prefix>订单编号</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="status">
                                            <el-select v-model="params.status" placeholder="请选择订单状态">
                                                <el-option
                                                    v-for="item in [{value: 0, label: '待付款'},{value: 1, label: '待发货'},{value: 2, label: '已发货'},{value: 3, label: '已经完成'}]"
                                                    :key="item.value" :label="item.label" :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item>
                                            <el-date-picker v-model="params.date" type="daterange" range-separator="至"
                                                start-placeholder="开始日期" end-placeholder="结束日期"
                                                value-format="yyyy-MM-dd" :picker-options="pickerOptions"
                                                @change="handleDateChange">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item class="text-right">
                                    <el-button size="mini" @click="resetForm">重置</el-button>
                                    <el-button type="danger" size="mini" @click="search">查询</el-button>
                                </el-form-item>
                            </el-form>

                            <div class="order-warp">
                                <div class="table-header">
                                    <div class="prodInfo" style="text-indent: 10px;">商品信息</div>
                                    <!-- <div class="status">订单状态</div> -->
                                    <div class="contacts">收货人</div>
                                    <div class="refund">售后状态</div>
                                    <div class="payInfo">支付信息</div>
                                    <div class="operate">操作</div>
                                </div>
                                <div v-loading="loading">
                                    <div class="prod-item" v-for="item in list" :key="item.id">
                                        <div class="header flex space-between">
                                            <div class="flex align-items">
                                                <span>#{{ item.id }}</span>
                                                <span>订单号:</span>{{ item.order_sn }}
                                                <span>下单时间:{{ item.create_time }}</span>
                                                <span>
                                                    <img :src="item.shop_logo" width="24px" height="24px">
                                                </span>
                                                <span>{{ item.shop_name }}</span>
                                            </div>
                                            <div class="flex align-items">
                                                <span class="status flex align-items"
                                                    :class="statusCode(item.status).class">
                                                    {{ statusCode(item.status).text }}
                                                </span>
                                                <span class="ml-10" v-if="item.status === 3"
                                                    @click="handleDelete(item)">
                                                    <i class="el-icon-delete" title="删除订单"></i></span>
                                            </div>
                                        </div>
                                        <div class="body flex">
                                            <div class="prodInfo flex">
                                                <div class="prodImg">
                                                    <el-image :src="item.order_item.spu_pic"
                                                        style="width: 80px;height: 80px;"></el-image>
                                                </div>
                                                <div class="ml-10 mr-10">
                                                    <div class="prodName">
                                                        <div class="text-hide">{{ item.order_item.spu_name }}</div>
                                                    </div>
                                                    <div class="prodPrice">单价：¥{{ item.order_item.sku_name }} 数量：{{
                                                        item.order_item.spu_name }}</div>
                                                </div>
                                            </div>
                                            <!-- <div class="status flex align-items" :class="statusCode(item.status).class">
                                                {{ statusCode(item.status).text }}
                                            </div> -->
                                            <div class="contacts">
                                                <p>
                                                    <el-tag size="mini">{{ item.receiver_name }}</el-tag> {{
                                                    item.receiver_phone }}
                                                </p>
                                                <p class="text-gray mt-10">
                                                    {{ item.receiver_province }}{{ item.receiver_city
                                                    }}{{ item.receiver_region }}{{ item.receiver_detail_address }}
                                                </p>
                                            </div>
                                            <div class="refund status flex align-items"
                                                :class="refundCode(item.refund_status).class">
                                                <template v-if="item.refund_status === 3">
                                                    <el-popover placement="top" title="售后拒绝理由" width="200"
                                                        trigger="hover" :content="item.refund_note">
                                                        <p slot="reference" class="text-hide-3"
                                                            style="cursor: pointer;">{{
                                                            refundCode(item.refund_status).text }}</p>
                                                    </el-popover>
                                                </template>

                                                <p v-if="item.refund_status != 3">{{ refundCode(item.refund_status).text
                                                    }}</p>
                                            </div>
                                            <div class="payInfo flex align-items">
                                                ￥{{ item.pay_amount }}
                                            </div>
                                            <div class="operate flex align-items">
                                                <el-button v-if="item.status === 0" type="warning" size="mini"
                                                    @click="handleCancel(item)">取消订单</el-button>

                                                <el-button v-if="item.status === 1 && item.refund_status === -1"
                                                    type="danger" size="mini"
                                                    @click="handleRefund(item)">申请退款</el-button>

                                                <el-button v-if="item.status === 2" type="primary" size="mini"
                                                    @click="handleConfirmReceipt(item)">确认收货</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center mt-30">
                                    <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                                        :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]"
                                        layout="total, prev, pager, next" :total="total" hide-on-single-page>
                                    </el-pagination>
                                </div>

                                <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <el-dialog title="申请退款" :visible.sync="refundDialogVisible" width="50%" center :close-on-click-modal="false">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="reason">
                    <el-select v-model="ruleForm.reason" placeholder="请选择退款原因">
                        <el-option v-for="item in orderDesc" :key="item.id" :label="item.name" :value="item.name">{{
                            item.name }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="description">
                    <el-input type="textarea" v-model="ruleForm.description" placeholder="请输入退款原因"
                        :autosize="{ minRows: 4, maxRows: 4 }" resize="none"></el-input>
                </el-form-item>
                <el-form-item prop="desc_pics">
                    <div class="avatar-uploader">
                        <uploadFile v-model="ruleForm.desc_pics" :limit="1" :multiple="false">
                            <template v-slot:upBtn>
                                <el-avatar v-if="ruleForm.desc_pics" :src="ruleForm.desc_pics"
                                    class="avatar"></el-avatar>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </template>
                        </uploadFile>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="refundDialogVisible = false">取 消</el-button>
                <el-button type="danger" @click="confirmRefund">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// http://admin.zbjleqp.com/api/payment/Wxpay/buygoods?order_sn=202409191627523495111849  把后面的订单编号改一下就能模拟支付了
/**
 * paid  0未支付 1已支付   这个是支付状态
 * status 0待付款 1待发货 2已发货 3已经完成  这个是订单状态
 * refund_status 售后状态  -1未申请 0待处理 1退货中 2已完成 3已拒绝
 */
import headers from '@/components/header.vue'
import sideNav from './components/sideNav.vue'
import uploadFile from '@/components/uploadFile.vue'
import { getOrderList, OrderCancel, orderDel, orderDesc, orderRefund, orderConfirm } from '@/api/apis'
export default {
    name: 'profile',
    components: {
        headers,
        sideNav,
        uploadFile
    },
    data () {
        return {
            refundDialogVisible: false,
            orderDesc: [], // 退款原因文案
            ruleForm: {
                order_sn: '',
                reason: '',
                description: '',
                desc_pics: ''
            },
            rules: {
                order_sn: [
                    { required: true, message: '订单号必须', trigger: 'blur' }
                ],
                reason: [
                    { required: true, message: '请选择退款原因', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入退款原因', trigger: 'blur' }
                ],
            },
            pickerOptions: {
                disabledDate (time) {
                    // 选择今天以及今天之后的日期
                    //return time.getTime() < Date.now() - 8.64e7// 如果没有后面的-8.64e7就是不可以选择
                    // 选择今天以及今天之前的日期
                    return time.getTime() > Date.now() - 8.64e7// 如果没有后面的-8.64e7就是不可以选择今天的
                }
            },
            loading: false,
            list: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
                order_sn: '', // 订单号
                status: '', // 订单状态
                goods_name: '', // 商品名称
                date: '', // 订单创建时间
                start_time: '', // 订单创建时间 开始
                end_time: '', // 订单创建时间 结束
            }
        }
    },
    created () {
        this.getOrderDesc()
        this.getList()
    },
    methods: {
        // 获取退货退款原因文案
        getOrderDesc(){
            orderDesc().then(res => {
                if (res.code === 1) {
                    this.orderDesc = res.data
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handleDateChange(e){
            this.params.start_time = e[0];
            this.params.end_time = e[1];
        },
        search(){
            this.params.page = 1;
            this.getList()
        },
        resetForm () {
            this.$refs.paramsRef.resetFields();
            this.params.start_time = '';
            this.params.end_time = '';
        },
        // 售后状态
        refundCode (status) {
            let data = {
                class: '',
                text: '',
            }
            switch (status) {
                case -1:
                    data.class = 'status-info'
                    data.text = '未申请'
                    break;
                case 0:
                    data.class = 'status-info'
                    data.text = '待处理'
                    break;
                case 1:
                    data.class = 'status-warning'
                    data.text = '退货中'
                    break;
                case 2:
                    data.class = 'status-warning'
                    data.text = '已完成'
                    break;
                case 3:
                    data.class = 'status-success'
                    data.text = '已拒绝'
                    break;
                default:
                    data.class = 'status-danger'
                    data.text = '未知状态'
                    break;
            }
            return data;
        },
        // 订单状态
        statusCode (status) {
            let data = {
                class: '',
                text: '',
            }
            switch (status) {
                case 0:
                    data.class = 'status-info'
                    data.text = '待付款'
                    break;
                case 1:
                    data.class = 'status-warning'
                    data.text = '待发货'
                    break;
                case 2:
                    data.class = 'status-warning'
                    data.text = '已发货'
                    break;
                case 3:
                    data.class = 'status-success'
                    data.text = '已完成'
                    break;
                default:
                    data.class = 'status-danger'
                    data.text = '未知状态'
                    break;
            }
            return data;
        },
        handleRefund(data){
            this.$confirm('确认要为该订单申请退款吗？', '申请退款', {
                confirmButtonType: 'danger',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
                customClass: 'custom-confirm',
                confirmButtonClass: 'confirmButton',
                center: true
            }).then(_ => {
                this.ruleForm.reason = '';
                this.ruleForm.description = '';
                this.ruleForm.desc_pics = '';
                this.ruleForm.order_sn = data.order_sn;
                this.refundDialogVisible = true;
                /* orderDel({
                    order_sn: data.order_sn
                }).then(res => {
                    if (res.code === 1) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                }) */
            })
                .catch(_ => {
                    this.$message.info('已取消')
                }); 
        },
        confirmRefund(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    orderRefund(this.ruleForm).then(res => {
                        if (res.code === 1) {
                            this.$message.success(res.msg)
                            this.refundDialogVisible = false
                            this.getList()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        },
        handleDelete (data) {
            this.$confirm('<h3><strong>确认删除该订单吗？</strong></h3><span class="text-gray">删除后订单不可恢复</span>', '删除订单', {
                confirmButtonType: 'danger',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                customClass: 'custom-confirm',
                confirmButtonClass: 'confirmButton',
                center: true
            }).then(_ => {
                orderDel({
                    order_sn: data.order_sn
                }).then(res => {
                    if (res.code === 1) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            })
            .catch(_ => {
                this.$message.info('已取消')
            });            
        },
        handleConfirmReceipt (data) {
            this.$confirm('<h3><strong>您确定要收货订单吗？</strong></h3><span class="text-gray">收货后订单转入完成状态</span>', '确定收货', {
                confirmButtonType: 'danger',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                customClass: 'custom-confirm',
                confirmButtonClass: 'confirmButton',
                center: true
            }).then(_ => {
                orderConfirm({
                    order_sn: data.order_sn
                }).then(res => {
                    if (res.code === 1) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            })
            .catch(_ => {
                this.$message.info('已取消')
            });
        },
        handleCancel(data){
            this.$confirm('确认要取消该订单吗？', '取消订单',{
                confirmButtonType: 'danger',
                confirmButtonText: '确定',
                cancelButtonText: '放弃',
                dangerouslyUseHTMLString: true,
                customClass: 'custom-confirm',
                confirmButtonClass: 'confirmButton',
                center: true
            }).then(_ => {                
                OrderCancel({
                    order_sn: data.order_sn
                }).then(res => {
                    if (res.code === 1) {
                        this.$message.success(res.msg);
                        this.getList();
                    } else {
                        this.$message.error(res.msg)
                    }
                });
            })
            .catch(_ => {
                this.$message.info('已取消')
            });
        },
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        getList () {
            let that = this
            that.loading = true
            getOrderList(this.params).then(res => {
                if (res.code === 1) {
                    that.list = res.data.data
                    that.total = res.data.total
                    //that.params.pagesize = Number(res.data.per_page)
                    that.params.lastPage = res.data.last_page
                    that.isEmpty = !that.list.length
                } else {
                    that.$message.error(res.msg)
                }
                that.loading = false
            })
        },
        spanMethod (row, column, rowIndex, columnIndex){
            if (columnIndex == 2) {
                return [1, 4]
            } else if (columnIndex == 3 || columnIndex == 4 || columnIndex == 5) {
                return [0, 0]
            }
        }
    },
}
</script>

<style scoped lang="less">
/deep/.el-input--prefix {
    .el-input__inner {
        padding-left: 80px;
    }
}

.el-select,
.el-range-editor {
    width: 100%;
}

.el-date-editor::before {
    content: '下单时间';
    width: 80px;
    color: #C0C4CC;
}

.order-warp {
    .table-header {
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        background-color: #F9FAFC;

        div {
            display: inline-block;
            font-size: 14px;
            color: #2E3033;
        }
    }
    .prodInfo {
        width: 36%;
    }


    .contacts {
        width: calc(36% - 10px);
        padding-right: 10px;
    }

    .refund {
        width: 10%;
    }
    .payInfo {
        width: 10%;
    }
    .operate {
        width: 8%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        .el-button {
            margin: 0;
            padding: 3px 6px;
        }
    }

    .prod-item {
        margin: 15px 0;
        font-size: 14px;
        background: rgba(255, 255, 255, 0);
        border-radius: 5px 5px 5px 5px;
        border: 1px solid rgba(46, 48, 51, 0.1);

        .header {
            padding: 15px;
            color: #2E3033;
            background-color: #F9FAFC;

            span {
                color: #434343;
                font-size: 12px;
                &+span {
                    margin-left: 20px;
                }
            }
            .el-icon-delete {
                cursor: pointer;
                &:hover {
                    color: #ff0000;
                }
            }
        }

        .body {
            padding: 15px 0;

            .prodInfo {
                width: calc(36% - 20px);
                padding-left: 20px;
            }

            .prodImg {
                flex-shrink: 0;
                width: 80px;
                height: 80px;
                border-radius: 5px;
                overflow: hidden;
            }

            .prodName {
                width: 260px;
                font-size: 14px;
                color: #2E3033;
                margin-bottom: 15px;
            }

            .prodPrice {
                font-size: 14px;
                color: hsla(216, 5%, 19%, 0.4);
            }
        }
        .status.status-primary {
            color: var(--el-color-primary);
            /* background: var(--sa-background-hex-active); */
        }

        .status.status-success {
            color: #52c41a;
            /* background: rgba(82, 196, 26, 0.16); */
        }

        .status.status-warning {
            color: #faad14;
            /* background: rgba(250, 173, 20, 0.16); */
        }

        .status.status-danger {
            color: #ff4d4f;
            /* background: rgba(255, 77, 79, 0.16); */
        }

        .status.status-info {
            color: #999999;
            /* background: rgba(153, 153, 153, 0.16); */
        }
    }
}

.avatar-uploader {
    /deep/.el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        &:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
    }

    .avatar {
        width: 60px;
        height: 60px;
        display: block;
    }
}
</style>